<template>
	<div>
		<van-popup v-model="showDiscount" position="bottom" :close-on-click-overlay="false" :style="{ height: '80%' }"
			:round="true">
			<div class="discount_yi">
				<div class="discount_top">
					<div class="discount_er">优惠券</div>
					<van-icon name="close" size="22" @click="closeShow" />
				</div>
			</div>
			<van-tabs v-model="active" :border="true" @click="column">
				<van-tab :title="'可用优惠券(' + coupons.length + ')'"></van-tab>
				<van-tab :title="'不可用优惠券(' + disabledCoupons.length + ')'"></van-tab>
			</van-tabs>
			<div class="discount_san" v-if="result.length > 0">您已选中优惠券{{result.length}}张，共可抵用￥{{discountNum}}</div>
			<!-- 可用优惠券 -->
			<div class="discount_si" v-show="active === 0">
				<van-empty image="error" description="暂无可用优惠券" v-show="coupons.length === 0" />
				<van-checkbox-group v-model="result" @change="selectChange">
					<div class="discount_wu" v-for="(item,index) in coupons" @click="selectClick(item,index)"
						v-show="coupons.length > 0">
						<div class="discount_liu">
							<div class="discount_qi">
								<div class="discount_ba">{{item.valueDesc}}<span class="discount_jiu">元</span></div>
								<span class="discount_shi">{{item.condition}}</span>
							</div>
							<div class="discount_shiyi">
								<div class="discount_shier">
									<span class="discount_shisan">{{item.name}}</span>
									<span class="discount_shisi">{{item.startAt + ' - ' + item.endAt}}</span>
								</div>
								<van-checkbox class="discount_shiwu" :name="item" ref="checkboxes"></van-checkbox>
							</div>
						</div>
						<div class="discount_shiliu">{{item.description}}</div>
					</div>
				</van-checkbox-group>
			</div>
			<!-- 不可用优惠券 -->
			<div class="discount_si" v-show="active === 1">
				<van-empty image="error" description="暂无不可用优惠券" v-show="disabledCoupons.length === 0" />
				<div class="discount_wu" v-for="(item,index) in disabledCoupons" v-show="disabledCoupons.length > 0">
					<div class="discount_liu">
						<div class="discount_qi">
							<div class="discount_ba" style="color: #323233;">{{item.valueDesc}}<span
									class="discount_jiu">元</span></div>
							<span class="discount_shi" style="color: #323233;">{{item.condition}}</span>
						</div>
						<div class="discount_shiyi">
							<div class="discount_shier">
								<span class="discount_shisan" style="color: #323233;">{{item.name}}</span>
								<span class="discount_shisi"
									style="color: #323233;">{{item.startAt + ' - ' + item.endAt}}</span>
							</div>
						</div>
					</div>
					<div class="discount_shiliu" style="color: #323233;">{{item.reason}}</div>
				</div>
			</div>
			<div class="discount_shiqi">
				<van-button type="danger" :round="true" class="discount_shiba" @click="onSubmit">确认</van-button>
			</div>
		</van-popup>
	</div>
</template>

<script>
	export default {
		name: 'discountPage',
		props: {
			//可用优惠券
			coupons: {
				type: Array,
				default: () => {
					return []
				}
			},
			//不可用优惠券
			disabledCoupons: {
				type: Array,
				default: () => {
					return []
				}
			},
			//选择优惠券
			resultList: {
				type: Array,
				default: () => {
					return []
				}
			},
			//唤起优惠券
			showDiscount: {
				type: [Boolean, String],
				default: false
			},
			//优惠价格
			discountPrice: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				active: 0,
				result: [],
				discountNum: 0
			}
		},
		mounted() {

		},
		created() {

		},
		watch: {
			resultList(newValue, oldValue) {
				this.result = newValue
			},
			discountPrice(newValue, oldValue) {
				this.discountNum = newValue
			},
		},
		methods: {
			//点击确认
			onSubmit() {
				this.$emit('onSubmit', this.result, this.discountNum)
			},
			//当优惠券绑定值变化时触发的事件
			selectChange(e) {
				this.discountNum = 0
				if (this.result.length > 0) {
					for (let i = 0; i < this.result.length; i++) {
						this.discountNum = this.discountNum + this.result[i].valueDesc
					}
				}
			},
			//点击某张优惠券
			selectClick(item, index) {
				let itemInfo=''
				if(this.result.length > 0){
					for(let i=0;i<this.result.length;i++){
						if(this.result[i].groupId === item.groupId){
							if(this.result[i].id != item.id){
								this.result.splice(i,1)
								this.$refs.checkboxes[index].toggle();
							}
							else{
								this.$refs.checkboxes[index].toggle();
							}
						}
						else{
							itemInfo = item
							this.$refs.checkboxes[index].toggle();
						}
					}
				}
				else{
					this.$refs.checkboxes[index].toggle();
				}
			},
			column(name, title) {
				this.active = name
			},
			closeShow() {
				this.result = this.resultList
				this.discountNum = this.discountPrice
				this.$emit('close')
			}
		}
	}
</script>

<style>
	.discount_shiba {
		width: 343px;
		height: 40px;
		margin: 10px 0;
	}

	.discount_shiqi {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 2;
		background-color: #fff;
	}

	.discount_shiliu {
		padding: 8px 16px;
		font-size: 12px;
		border-top: 1px dashed #ebedf0;
	}

	.discount_shiwu {
		margin: 0 6px;
	}

	.discount_shisi {
		font-size: 12px;
		color: #323233;
	}

	.discount_shisan {
		font-size: 14px;
		color: #333;
		margin-bottom: 10px;
		font-weight: bold;
	}

	.discount_shier {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.discount_shiyi {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.discount_shi {
		font-size: 12px;
		color: #ee0a24;
		text-align: center;
	}

	.discount_jiu {
		font-size: 12px;
		margin-left: 2px;
	}

	.discount_ba {
		margin-bottom: 6px;
		font-weight: 500;
		font-size: 26px;
		color: #ee0a24;
		text-align: center;
		display: flex;
		align-items: baseline;
	}

	.discount_qi {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 95px;
		padding: 0 8px;
	}

	.discount_liu {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.discount_wu {
		display: flex;
		flex-direction: column;
		margin: 0 6px 14px;
		overflow: hidden;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 0 6px rgba(0, 0, 0, .1);
		padding: 6px;
	}

	.discount_si {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 60px;
		top: 140px;
		overflow: auto;
	}

	.discount_san {
		padding: 10px;
		font-size: 14px;
		color: #E44224;
	}

	.discount_top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 10px;
	}

	.discount_er {
		font-size: 18px;
		font-weight: bold;
		letter-spacing: 1px;
	}

	.discount_yi {
		display: flex;
		flex-direction: column;
		margin: 10px;
	}

	.van-popup {
		background-color: #f7f8fa;
	}
</style>
